<%@ page import="com.devicemantra.coordinate.dataobjects.*,java.util.*,com.google.appengine.api.datastore.KeyFactory" %>
<html xmlns="http://www.w3.org/1999/xhtml">
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Add Locations !</title>
 <head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAZtqx8JxkReW-dJBlgM4IzBSWV9LTOb7Fazl1VdNawM1J6KSITRQSexRo0YWXBwuD4djbVUg8Tnmjow"
            type="text/javascript"></script>
<script type="text/javascript" src="/js/xmlhelper.js"></script> 
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script> 

<script type="text/javascript">

//Global variables
var mapdiv = document.getElementById("map");
var map;
var poly;
var count = 0;
var points = new Array();
var markers = new Array();
var icon_url ="http://labs.google.com/ridefinder/images/";
var tooltip;
var lineColor = "#0000af";
var fillColor = "#335599";
var lineWeight = 3;
var lineOpacity = .8;
var fillOpacity = .2;
//var report= document.getElementById("status");




function initXMLHttpClient() 
{
     var xmlhttp;
     try {
         // Mozilla / Safari / IE7
         xmlhttp = new XMLHttpRequest();
     } catch (e) {
          // IE
          var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
                                     'MSXML2.XMLHTTP.4.0',
                                     'MSXML2.XMLHTTP.3.0',
                                     'MSXML2.XMLHTTP',
                                     'Microsoft.XMLHTTP' );
        var success = false;
          for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
              try {
                   xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
                      success = true;
                } catch (e) {}
          }
          if (!success) {
              throw new Error('Unable to create XMLHttpRequest.');
          }
     }
     return xmlhttp;
 }

function load() 
{

  if (GBrowserIsCompatible()) 
  {
    map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.enableGoogleBar();

	var center = new GLatLng(24.196868919249656,55.1019287109375);
    map.setCenter(center,5);
	

    var mgrOptions = { borderPadding: 0, maxZoom: 15, trackMarkers: true };
	g_marker_manager = new MarkerManager(map,mgrOptions);
	GEvent.addListener(map, "click", leftBtnClick);

	// Add a div element for toolips
	 tooltip = document.createElement("div");
	 tooltip.className="tooltip";
	 map.getPane(G_MAP_MARKER_PANE).appendChild(tooltip);
		
    
  }
}

function leftBtnClick(overlay,point)
{
	alert("leftBtnClick called  now ");
	if(point) 
	{
		  count++;

		if(count%2 != 0) 
		{

		  	// Light blue marker icons
		  	var icon = new GIcon();
		  	icon.image = "http://www.wolfpil.de/lightblue.png";
		  	addIcon(icon);
		 }
		 else 
		 {
		  	// Purple marker icons
		  	var icon = new GIcon();
		  	icon.image = icon_url +"mm_20_purple.png";
		  	addIcon(icon);
		 }

		  // Make markers draggable
		  var marker = new GMarker(point, {icon:icon, draggable:true, bouncy:false, dragCrossMove:true});
		  map.addOverlay(marker);
		  marker.content = count;
		  markers.push(marker);
		  marker.tooltip = "Point "+ count;

		  GEvent.addListener(marker, "mouseover", function() {
		   showTooltip(marker);
		  });

		  GEvent.addListener(marker, "mouseout", function() {
		   tooltip.style.display = "none";
		 });

		  // Drag listener
		  GEvent.addListener(marker, "drag", function() {
		   tooltip.style.display= "none";
		   drawOverlay();
		  });

		  // Second click listener
		  GEvent.addListener(marker, "click", function() {
		  tooltip.style.display = "none";

		  // Find out which marker to remove
		  for(var n = 0; n < markers.length; n++) {
		   if(markers[n] == marker) {
		    map.removeOverlay(markers[n]);
		    break;
		   }
		  }

		  // Shorten array of markers and adjust counter
		  markers.splice(n, 1);
		  if(markers.length == 0) {
		    count = 0;
		  }
		   else {
		    count = markers[markers.length-1].content;
		    drawOverlay();
		  }
		  });
		 drawOverlay();
		 }
			
	return true;
}

function addIcon(icon) 
{ // Add icon attributes

	 icon.shadow= icon_url + "mm_20_shadow.png";
	 icon.iconSize = new GSize(12, 20);
	 icon.shadowSize = new GSize(22, 20);
	 icon.iconAnchor = new GPoint(6, 20);
	 icon.infoWindowAnchor = new GPoint(5, 1);
}


function showTooltip(marker) 
{ // Display tooltips

	 tooltip.innerHTML = marker.tooltip;
	 tooltip.style.display = "block";

	 // Tooltip transparency specially for IE
	 if(typeof(tooltip.style.filter) == "string") {
	 tooltip.style.filter = "alpha(opacity:70)";
	 }

	 var currtype = map.getCurrentMapType().getProjection();
	 var point= currtype.fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
	 var offset= currtype.fromLatLngToPixel(marker.getLatLng(),map.getZoom());
	 var anchor = marker.getIcon().iconAnchor;
	 var width = marker.getIcon().iconSize.width + 6;
	// var height = tooltip.clientHeight +18;
	 var height = 10;
	 var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y - height)); 
	 pos.apply(tooltip);
}

function drawOverlay()
{

	 if(poly)
	 { 
		 map.removeOverlay(poly); 
	 }

	 points.length = 0;

	for(i = 0; i < markers.length; i++) 
	{
	  	points.push(markers[i].getLatLng());
	}
	 
	 // Polygon mode
	 points.push(markers[0].getLatLng());
	 //poly = new GPolygon(points, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity);
	 poly = new GPolygon(points, "#000000", 1, 1, "#336699", 0.3);
	 map.addOverlay(poly);
}






    </script>




  </head>

<body onload="load()" onunload="GUnload()" topmargin="0" leftmargin="0" >
<div id="map" style="position: relative;top: 5px; left: 5px;float:left;width: 660px; height:400px;border: 1px solid black;"></div>
</div> 
<div style="">
</body>
</html>

